
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="../static/jquery-1.11.3.js"></script>
<script type="text/javascript" src="../static/jquery.tmpl.js"></script>
<script type="text/javascript" src="../static/knockout-3.3.0.js"></script>
</head>
<body>
	<script type="text/javascript">
		var Page = Page || {};
		Page.Utility = Page.Utility || {};
		Page.Utility.Registration = Page.Utility.Registration || {};
		//获取密码强度
		Page.Utility.Registration.getPasswordLevel = function(password) {
			if (password == null || password == '')
				return 0;
			if (password.length <= 4)
				return 0; //密码太短
			var Modes = 0;
			for (i = 0; i < password.length; i++) {
				Modes |= CharMode(password.charCodeAt(i));
			}
			return bitTotal(Modes);
			//CharMode函数 
			function CharMode(iN) {
				if (iN >= 48 && iN <= 57) //数字
					return 1;
				if (iN >= 65 && iN <= 90) //大写字母
					return 2;
				if (iN >= 97 && iN <= 122) //小写
					return 4;
				else
					return 8; //特殊字符 
			}
			//bitTotal函数
			function bitTotal(num) {
				modes = 0;
				for (i = 0; i < 4; i++) {
					if (num & 1)
						modes++;
					num >>>= 1;
				}
				return modes;
			}
		};
		var viewModel = {
			Password : ko.observable(""),
			Ocolor : "#eeeeee"
		};
		viewModel.PasswordLevel = ko.dependentObservable(function() {
			return Page.Utility.Registration.getPasswordLevel(this.Password());
		}, viewModel);
		viewModel.Lcolor = ko.dependentObservable(function() {
			//根据密码强度判断第一个格显示的背景色
			return this.PasswordLevel() == 0 ? this.Ocolor : (this
					.PasswordLevel() == 1 ? "#FF0000"
					: (this.PasswordLevel() == 2 ? "#FF9900" : "#33CC00"))
		}, viewModel);
		viewModel.Mcolor = ko.dependentObservable(function() {
			//根据密码强度判断第二个格显示的背景色
			return this.PasswordLevel() < 2 ? this.Ocolor : (this
					.PasswordLevel() == 2 ? "#FF9900" : "#33CC00")
		}, viewModel);
		viewModel.Hcolor = ko.dependentObservable(function() {
			//根据密码强度判断第二个格显示的背景色
			return this.PasswordLevel() < 3 ? this.Ocolor : "#33CC00"
		}, viewModel);
		$((function() {
			ko.applyBindings(viewModel);
		}));
	</script>
	<form name="form1" action="">
		输入密码:<input type="text" size="10"
			data-bind="value:Password, valueUpdate: 'afterkeydown'"> <br>
		密码强度:
		<table width="217" border="1" cellspacing="0" cellpadding="1"
			bordercolor="#cccccc" height="23" style='display: inline'>
			<tr align="center" bgcolor="#eeeeee">
				<td width="50" id="strength_L"
					data-bind="style: { backgroundColor: Lcolor }">弱</td>
				<td width="50" id="strength_M"
					data-bind="style: { backgroundColor: Mcolor }">中</td>
				<td width="50" id="strength_H"
					data-bind="style: { backgroundColor: Hcolor }">强</td>
			</tr>
		</table>
	</form>
</body>
</html>